:root {
    --color-text: #000;
    --color-text-p2: rgba(0, 0, 0, 0.62);
    --color-border-form: rgba(0, 0, 0, 0.42);
    --color-border: rgba(0, 0, 0, 0.2);
    --color-border-p2: rgba(0, 0, 0, 0.1);
    --color-icon: rgba(0, 0, 0, 0.62);
    --color-link: #2f609f;
    --color-link-visited: #4f2bbb;
    --color-fill: rgba(0, 0, 0, 0.03);
    --color-fill-table-row-odd: rgba(0, 0, 0, 0.08);
    --color-fill-table-row-even: rgba(0, 0, 0, 0.03);
    --color-fill-form-element: var(--color-fill);
    --color-fill-current: rgba(0, 0, 0, 0.62);
    --color-fill-disabled: rgba(0, 0, 0, 0.15);
    --color-fill-hover: rgba(37, 118, 195, 0.2);
    --color-fill-focus: rgba(37, 118, 195, 0.3);
    --color-fill-active: var(--primary);
    --highlighter-fill: #fc0;
    --shadow: 0 4px 32px rgba(0, 0, 0, 0.175);
    --bg: #fff;
    --bg-hover: color(var(--bg) contrast(100%) blend(var(--bg) 90%));
    --checkable-disabled-fill: #808080;
    --primary: #1960a4;
    --secondary: #999;
    --error: #900;
    --error-fill: rgba(149, 29, 18, 0.2);
    --danger: #900;
    --warn: #943e00;
    --warn-fill: rgba(215, 137, 88, 0.2);
    --success: #070;
    --success-fill: rgba(51, 117, 30, 0.2);
    --control-margin-bottom: 1rem;
    --control-min-size-touch: 44px;
    --control-min-size-desktop: 24px;
    --control-label-margin-bottom: 0.25rem;
    --radius: 6px;
    --gutter: 1rem;
    --gutter-static: 15px;
    --gutter-static-one-third: calc(var(--gutter-static) / 3);
    --gutter-static-two-thirds: calc(var(--gutter-static-one-third) * 2);
    --input-horizontal-padding: var(--gutter-static-one-third);
    --input-vertical-padding: 0;
    --container-max-width: 80rem;

    /**
     * Font-size
     * Size ratios from Fonts Module Level 3
     * https://www.w3.org/TR/css-fonts-3/#propdef-font-size
     */
    --line-height: 1.5;
    --font-size-x-small: 0.857142rem;
    --font-size-small: 0.857142rem;
    --font-size-medium: 1rem;
    --font-size-large: 1.3rem;
    --font-size-x-large: 1.7143rem;
    --font-size-xx-large: 2.2858rem;

    /**
     * Font-weights
     */
    --text-weight-black: 900;
    --text-weight-bold: 700;
    --text-weight-medium: 600;
    --text-weight-regular: 400;
    --text-weights-are-bolder: 0;
    --text-weight-basis: var(--text-weight-regular);
    --text-weight-addition-factor: 200;
    --text-weight-headline-basis: 600;
    --text-weight-headline-addition-factor: 100;
    --text-weight: calc(var(--text-weight-basis) + ( var(--text-weight-addition-factor) * var(--text-weights-are-bolder)));
    --text-weight-headline: var(--text-weight-bold);
    --text-weight-button: var(--text-weight-bold);
}

/* Lean on min-width queries to create mobile-first CSS. */
@custom-media --small-up (min-width: 321px);
@custom-media --medium-up (min-width: 641px);
@custom-media --large-up (min-width: 1025px);
@custom-media --x-large-up (min-width: 1441px);
@custom-media --xx-large-up (min-width: 1921px);

/* Use these max-width queries as infrequently as possible. */
@custom-media --small (max-width: 640px);
@custom-media --medium-down (max-width: 1024px);
@custom-media --medium (min-width: 641px) and (max-width: 1024px);
@custom-media --large (min-width: 1025px) and (max-width: 1440px);
@custom-media --x-large (min-width: 1441px) and (max-width: 1920px);
